<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022-05-02
  Time: 9:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生班级后台管理系统</title>
  <link href="${pageContext.request.contextPath}/css/jquery-ui.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/default.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/styles.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" />
  <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico" />
</head>

<body>
<header class="htmleaf-header">
  <h1>学生班级后台管理系统 <span>Student background management system</span></h1>
  <div class="htmleaf-links">
    <a class="htmleaf-icon icon-htmleaf-home-outline" href="#" title="home" target="_blank"><span> </span></a>
    <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="#" title="返回" target="_blank"><span>
					返回</span></a>
  </div>
</header>
<form action=""  class='login' id="loginform">
  <div class='login_title'>
    <span>请输入账户密码登录</span>
  </div>
  <div class='login_fields'>
    <div class='login_fields__user'>
      <div class='icon'>
        <img src='${pageContext.request.contextPath}/img/user_icon_copy.png'>
      </div>
      <input placeholder='请输入用户名' type='text' name="username" id="username">
      <div class='validation'>
        <img src='${pageContext.request.contextPath}/img/tick.png'>
      </div>
      </input>
    </div>
    <div class='login_fields__password'>
      <div class='icon'>
        <img src='${pageContext.request.contextPath}/img/lock_icon_copy.png'>
      </div>
      <input placeholder='请输入密码' type='password' name="password" id="password">
      <div class='validation'>
        <img src='${pageContext.request.contextPath}/img/tick.png'>
      </div>
    </div>
    <div class='login_fields__submit'>
      <input type='button' value='登 录'>
      <div class='forgot'>
        <a href='#'>忘记密码?</a>
      </div>
    </div>
  </div>
  <div class='success'>
    <h2>身份验证错误</h2>
    <p><a href="" style="color:#fff;">
      返回继续登录</a></p>
  </div>
  <div class='disclaimer'>
    <p style="color:#fff;">请遵守管理员协议，履行管理员义务，不做泄露用户隐私的事，否则将依法处理</p>
  </div>
</form>
<div class='authent'>
  <img src='img/puff.svg'>
  <p>Authenticating...</p>
</div>
<script src='${pageContext.request.contextPath}/js/stopExecutionOnTimeout.js?t=1'></script>
<script src="${pageContext.request.contextPath}/js/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script>
  $('input[type="button"]').click(function () {
    //console.log($.trim($("#username").val()))
    if($.trim($("#username").val())==''||$.trim($("#password").val())==''){
      alert("用户名密码为空");
    }
   else{
      $.ajax({
        type:"post",
        url:"${pageContext.request.contextPath }/adminlogin",
        data:$("#loginform").serialize(),
        success:function(res){
          // console.log(res)
          // alert(res.msg);
          if(res.msg=="用户名密码错误，请重新输入"){
            layer.msg(res.msg,{  icon: 2,time: 3000});
          }else if(res.msg=="登录成功"){
            layer.msg(res.msg,{  icon: 1,time: 3000});
            setTimeout(function (){
              window.location.href="${pageContext.request.contextPath }/admin/main";
            },700)
          }
        },error:function(){
          //alert("此页面不存在");
          //window.location.href="index";
        }
      })
      $('.login').addClass('test');
      setTimeout(function () {
        $('.login').addClass('testtwo');
      }, 300);
      setTimeout(function () {
        $('.authent').show().animate({ right: -320 }, {
          easing: 'easeOutQuint',
          duration: 600,
          queue: false
        });
        $('.authent').animate({ opacity: 1 }, {
          duration: 200,
          queue: false
        }).addClass('visible');
      }, 500);
      setTimeout(function () {
        $('.authent').show().animate({ right: 90 }, {
          easing: 'easeOutQuint',
          duration: 600,
          queue: false
        });
        $('.authent').animate({ opacity: 0 }, {
          duration: 200,
          queue: false
        }).addClass('visible');
        $('.login').removeClass('testtwo');
      }, 2500);
      setTimeout(function () {
        $('.login').removeClass('test');
        $('.login div').fadeOut(123);
      }, 2800);
      setTimeout(function () {
        $('.success').fadeIn();
      }, 3200);
    }
  });

  $('input[type="text"],input[type="password"]').focus(function () {
    $(this).prev().animate({ 'opacity': '1' }, 200);
  });
  $('input[type="text"],input[type="password"]').blur(function () {
    $(this).prev().animate({ 'opacity': '.5' }, 200);
  });
  $('input[type="text"],input[type="password"]').keyup(function () {
    if (!$(this).val() == '') {
      $(this).next().animate({
        'opacity': '1',
        'right': '30'
      }, 200);
    } else {
      $(this).next().animate({
        'opacity': '0',
        'right': '20'
      }, 200);
    }
  });
    var open = 0;
    $('.tab').click(function () {
      $(this).fadeOut(200, function () {
        $(this).parent().animate({ 'left': '0' });
      });
    });
</script>
</body>

</html>